<template>
	<view>
		<u--form labelPosition="left" :model="plan" labelWidth=80>
			<u-form-item label="计划标题" prop="title" borderBottom ref="item1">
				<u--input v-model="plan.title" border=" none" placeholder="请输入计划标题"></u--input>
			</u-form-item>
			<u-form-item label="计划内容" prop="title" borderBottom ref="item1">
				<u--textarea v-model="plan.content" placeholder="请输入计划内容"></u--textarea>
			</u-form-item>
			<u-form-item label="完成情况" prop="statusName" borderBottom @click="showStatus = true; hideKeyboard()"
				ref="item1">
				<u--input v-model="plan.statusName" disabled disabledColor="#ffffff" placeholder="请选择计划完成状态"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="计划时间" prop="doDate" borderBottom @click="showDate = true; hideKeyboard()" ref="item1">
				<u--input v-model="plan.doDate" disabled disabledColor="#ffffff" placeholder="计划执行时间"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
		</u--form>
		<u-action-sheet :show="showStatus" :actions="actions" title=完成状态 @close="showStatus = false"
			@select="statusSelect">
		</u-action-sheet>

		<u-datetime-picker @confirm="selectDate" :show="showDate" v-model="date" mode="date"
			@cancel="showDate =false"></u-datetime-picker>

		<view class="btn-container">
			<u-button text="保存" type="primary" @click="saveOrUpdate"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDate: false,
				date: Number(new Date()),
				plan: {},
				showStatus: false,
				actions: [{
						name: '已完成',
						code: 1
					},
					{
						name: '未完成',
						code: 0
					},
				],
			};
		},
		onLoad(options) {
			// console.log(options);
			if (options.id) {
				this.getById(options.id)
			}
		},
		onReady() {

		},
		methods: {
			getFormatDate(timestamp) {
				var date = new Date(timestamp)
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D
			},
			selectDate(options) {
				console.log(options);
				let date = this.getFormatDate(options.value)
				this.plan.doDate = date
				console.log(date);
				this.showDate = false
			},
			async getById(id) {
				let {
					data: res
				} = await uni.$http.get('/user/plan/' + id)
				if (res.code === 20000) {
					this.plan = res.data
					this.plan.statusName = this.plan.status === 0 ? '未完成' : '已完成'
				} else {
					uni.$showMsg(res.msg)
				}
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
			statusSelect(e) {
				// console.log(e);
				this.plan.statusName = e.name
				this.plan.status = e.code
			},
			async saveData() {
				let {
					data: res
				} = await uni.$http.post('/user/plan', this.plan)
				if (res.code === 20000) {
					setTimeout(() => {
						uni.$showMsg('保存成功！')
					}, 1500)
					uni.navigateBack()
				}
			},
			async updateData() {
				let {
					data: res
				} = await uni.$http.put('/user/plan/' + this.plan.id, this.plan)
				if (res.code === 20000) {
					setTimeout(() => {
						uni.$showMsg('保存成功！')
					}, 1500)
					uni.switchTab({
						url: '/pages/schedule/schedule'
					})
				}
			},
			saveOrUpdate() {
				let res = {}
				if (this.plan.id) {
					this.updateData()
				} else {
					this.saveData()
				}
			}
		},
	}
</script>

<style lang="scss">
	.btn-container {
		width: 50%;
		margin: 10px auto;
	}
</style>